Hello Everyone! In this video tutorial, we will show you how to build a digital clock using HTML, CSS, and JavaScript. We will start by creating the basic HTML structure for the clock, then use CSS to style it and give it a modern look. Next, we will write JavaScript code to get the current time and display it on the clock.
Throughout the tutorial, we will explain each step in detail, so even if you are new to web development, you can easily follow along. We will also provide the complete source code for the digital clock for free, so you can use it in your own projects.
By the end of this video, you will have a fully functional digital clock that you can customize and use on your website or web application. So, join us in this fun and educational tutorial and learn how to make a digital clock in HTML, CSS, and JS!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock by Awais Mughal</title>
<style>
body{
background-color: #d9e3f0;
}
.clock{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffffbb;
display: flex;
justify-content: center;
align-items: center;
width: 720px;
height: 200px;
border-radius: 20px;
box-shadow: 5px 5px 10px rgb(55 94 148 / 24%), -5px -5px 10px rgb(255 255 255 / 43%);
}
.time{
font-size: 8rem;
font-weight: bold;
text-align: center;
color: #333;
font-family: sans-serif;
}
</style>
</head>
<body>
< class="clock">
<span class="time"></span>
</div>
</body>
<script>
function updateTime() {
const now = new Date();
let hours = now.getHours();
const amOrPm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12;
const minutes = now.getMinutes().toString().padStart(2, "0");
const seconds = now.getSeconds().toString().padStart(2, "0");
const timeString = `${hours}:${minutes}:${seconds} ${amOrPm}`;
const clock = document.querySelector(".time");
clock.textContent = timeString;
}
setInterval(updateTime, 1000);});
}
</script>
</html>